{% load static %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css'  %}">
    <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css'  %}">
    <link rel="stylesheet" href="{% static 'css/font-awesome.css'  %}">
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<script src="{% static 'plugins/layui/layui.js' %}"></script>
{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-sm-12 col-form-label" style="color: #007bff">角色名：</label>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <input class="form-control" type="text" value="{{ role_name }}" readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-12 col-form-label" style="color: #007bff">修改为：</label>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <input class="form-control" type="text" id="new_role">
                        <input class="form-control" type="text" id="role_id" value="{{ role_id }}" hidden>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-2">
                        <button type="submit" id="add_new" class="btn btn-danger">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% block custom_js %}
<script type="text/javascript">
//post提交的csrf认证
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
$("#add_new").click(function () {
    $.ajax({
        type: "post",
        url: "{% url 'login:new_role' %}",
        async: false,
        data:{
            'type': 'change',
            'new_role': $("#new_role").val(),
            'role_id': $("#role_id").val(),
        },
        success: function (data) {
            if(data.status === 1){
                //操作成功
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 6,
                        skin: 'layer-ext-moon',
                        offset: 't',
                        yes: function () {
                            parent.layer.closeAll()
                            window.location.reload();
                        }
                    })
                })
            }else {
                //操作失败
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 0,
                        skin: 'layer-ext-moon',
                        offset: 't',
                        yes: function () {
                            parent.layer.closeAll()
                        }
                    })
                })
            }
        }
    });
})
</script>
{% endblock %}
{% endblock %}